<template>
	<view class="home">
    
    <image class="image-bg" src="/static/images/backgorud.jpg"/>
    <scroll-view scroll-x class="navscroll">
      <view class="item" v-for="item in 10">单衣</view>
    </scroll-view>
    <view class="box">
      <image class="pic" src="../../static/images/1.jpg"></image>
      <image class="pic" src="../../static/images/2.jpg"></image>
      <image class="pic" src="../../static/images/3.jpg"></image>
    </view>
    <view class="box">
      <image class="pic" src="../../static/images/4.png"></image>
    </view>
    
   
    
    
	</view>
</template>

<script>
	export default {
	  data() {
	    return {
	      
	    }
	  },
	  methods: {
	    
	  }
	}   
</script>

<style lang="scss" scoped>
.image-bg {
      position: absolute;
      z-index: -1;
      left: 0;
      right: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
}

.box{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
  .pic{
    height: 230rpx;
    width: 240rpx;
    padding-top: 20px;
    padding-left: 5px;
    padding-right: 5px;
    image{
      width: 100%;
      height: 100%;
    }
  }
}





.navscroll{
		height: 100rpx;
		background: #ffffff;
		white-space: nowrap;
		::v-deep ::-webkit-scrollbar {
			width: 4px !important;
			height: 1px !important;
			overflow: auto !important;
			background: transparent !important;
			-webkit-appearance: auto !important;
			display: block;
		}
    .item{
        font-size: 35rpx;
        display: inline-block;
        line-height: 100rpx;
        padding: 0 15rpx;
        color: #333;
    }
}
</style>
